import { useEffect } from 'react'
import { useLocation } from 'react-router'
import { Card } from 'antd'

import { COMMENT_ID } from '../utils'

export const Comment = () => {
  const { hash } = useLocation()
  useEffect(() => {
    if (hash === `#${COMMENT_ID}`) {
      document.body.querySelector(`#${COMMENT_ID}`)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
    }
  }, [hash])

  return (
    <Card styles={{ body: { height: 500 } }} title="留言" id={COMMENT_ID}>
      功能开发中，敬请期待！
    </Card>
  )
}
